<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>系统设置</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css"/>
    <link rel="stylesheet" href="__CSS__/supplies/common.css"/>
    <!--<link rel="stylesheet" href="__CSS__/supplies/fileinput/fileinput.css"/>-->
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css"/>
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css"/>
    <style>
        body {
            height: calc(100% - 90px);
            overflow: hidden;
            background: white   ;
        }

        .checkHead-table tr {
            margin-left: 15px;
            margin-bottom: 15px;
        }

        table tr {
            height: 60px;
        }

        #body {
            width: 1000px;
            height: 600px;
            margin: auto;
        }

        .form-title {
            height: 44px;
            line-height: 44px;
            width: 120px;
            text-align: right;
            font-size: 14px;
        }

        .form-value {
            /*line-height: 60px;*/
            font-size: 14px;
        }

        input {
            width: 300px;
            height: 44px;
        }

        .file {
            /*position: absolute;*/
            display: inline-block;
            background: white;
            border: 1px solid #999;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #333;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            /*left: 0px;*/
            /*top: 0px;*/
            cursor: pointer;
            margin-top: -10px;
            margin-left: 10px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: white;
            border-color: #999;
            color: #333;
            text-decoration: none;
        }

        .setting_ul li {
            padding-bottom: 15px;
            float: left;
            margin-right: 60px;
        }
        img {
            width: 75px;
            height: 75px;
            max-width: 75px;
            _width: expression(this.width > 75 ? "37.5px" : this.width);
        }
    </style>
</head>
<body style="overflow: auto;">
<div id="body">
    <div class="setting_manage" style="margin-top:50px; margin-left: 15px;width: 100%;height: 100%;">
        <!--<table class="checkHead-table">-->
        <ul class="setting_ul" style="margin-top: 30px;">
            <template v-for="(key,value) in result">
                <li class="form-inline">
                    <div class="form-title form-group">
                        {{key.name}}：
                    </div>
                    <div class="form-value form-group" v-if="key.id == 11" style="position: relative;width: 300px;">
                        <img class="" :src="userImg"/>
                        <a href="javascript:;" class="file"><i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件
                            <form id="user_android" enctype="multipart/form-data">
                                <input type="file" @change="uploadsImg" name="user_android_image" style="">
                            </form>
                        </a>
                    </div>
                    <div class="form-value form-group" v-else-if="key.id == 12" style="position: relative;width: 300px;">
                        <img class="" :src="supplierImg"/>
                        <a href="javascript:;" class="file"><i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件
                            <form id="supplier_android" enctype="multipart/form-data">
                                <input type="file" @change="uploadsImg" name="supplier_android_image"
                                       style="">
                            </form>
                        </a>
                        <!--<input id="file_supplier" type="file" name="supplier_image">-->
                    </div>
                    <div class="form-value form-group" v-else-if="key.id == 13" style="position: relative;width: 300px;">
                        <img class="" :src="userIosImg"/>
                        <a href="javascript:;" class="file"><i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件
                            <form id="user_ios" enctype="multipart/form-data">
                                <input type="file" @change="uploadsImg" name="user_ios_image"
                                       style="">
                            </form>
                        </a>
                        <!--<input id="file_supplier" type="file" name="supplier_image">-->
                    </div>
                    <div class="form-value form-group" v-else-if="key.id == 14" style="position: relative;width: 300px;">
                        <img class="" :src="supplierIosImg"/>
                        <a href="javascript:;" class="file"><i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件
                            <form id="supplier_ios" enctype="multipart/form-data">
                                <input type="file" @change="uploadsImg" name="supplier_ios_image"
                                       style="">
                            </form>
                        </a>
                        <!--<input id="file_supplier" type="file" name="supplier_image">-->
                    </div>
                    <div class="form-value form-group" v-else style="width: 300px;">
                        <input type="text" class="search county" v-model="key.value" v-on:change="joinStr(key,value)"/>
                        <input type="hidden" class="search county" v-model="key.json_str"/>
                    </div>
                </li>
            </template>
        </ul>
        <!--</table>-->
        <div class="btn" style="margin-left: 35%;margin-top: 20px;">
            <button type="button" class="btn btn-default bot" data-dismiss="modal" v-on:click="saveInfo()"
                    style="width:120px;"><i class="icon-ok align-top bigger-125"></i>&nbsp;保存
            </button>
        </div>
    </div>
</div>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script src="__JS__/supplies/laydate/laydate.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<!--<script rel="script" src="__JS__/supplies/fileinput/fileinput.js"></script>-->
<!--<script rel="script" src="__JS__/supplies/fileinput/locales/zh.js"></script>-->
<script>

    $(document).ready(function () {
    });

    vm = new Vue({
        el: "#body",
        data: {
            userImg:'',
            supplierImg:'',
            userIosImg:'',
            supplierIosImg:'',
            result: {},
            formDat: [],
            arr: []
        },
        created: function () {
            var url = "{:url('admin/Setting/getSettingInfo')}";
            this.$http.post(url).then(function (data) {
                this.result = data.body.data;
                this.userImg = oss_url + data.body.data[10].value;
                this.supplierImg = oss_url + data.body.data[11].value;
                this.userIosImg = oss_url + data.body.data[12].value;
                this.supplierIosImg = oss_url + data.body.data[13].value;
//                var user_image = [];
//                var supplier_image = [];
//                for (var i=0; i<this.result.length ; i++)
//                {
//                    if(this.result[i].id == 7 && this.result[i].value)
//                    {
//                        user_image = ["<img src='"+oss_url+this.result[i].value+"' style='width:auto;height:160px;'>"];
//                    }
//                    else if(this.result[i].id == 8 && this.result[i].value)
//                    {
//                        supplier_image = ["<img src='"oss_url+this.result[i].value+"' style='width:auto;height:160px;'>"];
//                    }
//                }
            })
        },
        methods: {
            joinStr: function (obj, index) {
                if (this.arr.length > 0) {
                    var status = false;
                    for (var i = 0; i < this.arr.length; i++) {
                        if (obj.id === this.arr[i]) {
                            status = true;
                            this.arr[i] = obj.id;
                            this.formDat[i] = 'id:' + obj.id + ',value:' + obj.value;
                        }
                        else {
                            status = false;
                        }
                    }
                    if (status == false) {
                        this.arr.push(obj.id);
                        this.formDat.push('id:' + obj.id + ',value:' + obj.value);
                    }
                }
                else {
                    this.arr.push(obj.id);
                    this.formDat.push('id:' + obj.id + ',value:' + obj.value);
                }
            },
            saveInfo: function () {
                var url = "{:url('admin/Setting/setting')}";
                this.$http.post(url, {
                    data: this.formDat,
                }).then(function (data) {
                    console.log(data);
                    if (data.status == 200) {
                        layer.msg('保存成功');
                    } else {
                        layer.msg(data.msg);
                    }
                })
            },
            uploadsImg : function (e) {
                var ip_name = e.target.name;
                var fData = new FormData();
                fData.append(ip_name, e.target.files[0]);
                $.ajax({
                    url: "{:url('admin/Setting/uploadSettingImg')}",
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: fData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if(ip_name == "user_android_image")
                        {
                            vm.userImg = oss_url+res.img_path;
                        }
                        else if(ip_name == "supplier_android_image")
                        {
                            vm.supplierImg = oss_url+res.img_path;
                        }
                        else if(ip_name == "user_ios_image")
                        {
                            vm.userIosImg = oss_url+res.img_path;
                        }
                        else if(ip_name == "supplier_ios_image")
                        {
                            vm.supplierIosImg = oss_url+res.img_path;
                        }
                    }
                });
            },
//            uploadSupplierImg: function (e) {
//                var fData = new FormData();
//                fData.append('supplier_img', e.target.files[0]);
//                $.ajax({
//                    url: "{:url('admin/Setting/uploadSettingImg')}",
//                    type: 'POST',
//                    dataType: 'json',
//                    cache: false,
//                    data: fData,
//                    processData: false,
//                    contentType: false,
//                    success: function (res) {
//                        vm.suppliesImg = oss_url+res.img_path;
//                    }
//                });
//            },
//            uploadUserImg: function (e) {
//
//                var fData = new FormData();
//                fData.append('user_img', e.target.files[0]);
//                $.ajax({
//                    url: "{:url('admin/Setting/uploadSettingImg')}",
//                    type: 'POST',
//                    dataType: 'json',
//                    cache: false,
//                    data: fData,
//                    processData: false,
//                    contentType: false,
//                    success: function (res) {
//                        vm.userImg = oss_url + res.img_path;
//                    }
//                });
//            }
        }
    });

</script>
</body>
</html>